import { defineComponent, h, ref } from 'vue'
import { DataItemType } from '@/views/system/role/types'
import {
  DataTableColumns,
  NCard,
  NDataTable,
  NPagination,
  NTag,
  useMessage
} from 'naive-ui'
import styles from '@/views/system/role/index.module.scss'
import { getRoleList } from '@/service/modules/system-role'

const log = defineComponent({
  name: 'log',
  setup() {
    const createColumns = (): DataTableColumns<DataItemType> => {
      return [
        { title: '角色名称', key: 'roleName' },
        {
          title: '数据权限',
          key: 'dataScope',
          render(row) {
            let scope = ''
            const DataScopeOptions = {
              '1': '全部数据权限',
              '2': '本人数据权限',
              '3': '本部门数据权限',
              '4': '本部门及以下数据权限'
            }
            // @ts-ignore
            scope = DataScopeOptions[row.dataScope]
            return scope
          }
        },
        {
          title: '状态',
          key: 'status',
          render(row) {
            return h(
              // @ts-ignore
              NTag,
              {
                type: row.status == 0 ? 'success' : 'error'
              },
              {
                default: () => (row.status == 0 ? '启用' : '禁用')
              }
            )
          }
        },
        { title: '创建人', key: 'createBy' },
        { title: '创建时间', key: 'createTime' }
      ]
    }

    const message = useMessage()

    const dataList = ref([])

    const handleList = function () {
      pagination.value.loading = true
      getRoleList(
        // @ts-ignore
        searchForm.value,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          // @ts-ignore
          dataList.value = res.data.records
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    return {
      message,
      columns: createColumns(),
      dataList,
      handleList,
      pagination
    }
  },
  render() {
    return (
      <NCard hoverable>
        <NDataTable
          // @ts-ignore
          columns={this.columns}
          data={this.dataList}
          loading={this.pagination.loading}
        ></NDataTable>
        <NPagination
          class={styles['page-position']}
          display-order={['quick-jumper', 'pages', 'size-picker']}
          page-count={this.pagination.pageCount}
          page-size={this.pagination.pageSize}
          page-sizes={this.pagination.pageSizes}
          page={this.pagination.page}
          on-update:page={this.pagination.onUpdatePage}
          on-update:page-size={this.pagination.onUpdatePageSize}
          show-quick-jumper
          show-size-picker
        ></NPagination>
      </NCard>
    )
  }
})

export default log
